<script setup lang="ts">
import { navigateTo } from '@tarojs/taro';
import {
  Tips as AppNutIconTips,
  Location2 as AppNutIconLocation2,
  Shop as AppNutIconShop,
} from '@nutui/icons-vue-taro';
import MeetingRoomStatusList from './meeting-room-status-list.vue';
import { getSysImgUrl } from '/@/utils/index';
const props = defineProps<{
  item: MeetingInfoApi.newDto;
  appointmentTime: number;
}>();
</script>
<template>
  <view
    class="meeting-list-item"
    @click="
      navigateTo({
        url: `/pages/meeting/edit/index?id=${props.item.id}&applyTime=${props.appointmentTime}`,
      })
    "
  >
    <view class="meeting-list-item__content">
      <view class="meeting-list-item__image-container">
        <image
          v-if="props.item.picture"
          :src="getSysImgUrl(props.item.picture)"
          class="meeting-list-item__image"
          mode="aspectFill"
        />
        <app-nut-icon-tips v-else />
      </view>
      <view class="meeting-list-item__right">
        <view class="meeting-list-item__title-wrapper">
          <text class="meeting-list-item__title">{{ props.item.name }}</text
          >&nbsp;&nbsp;|&nbsp;&nbsp;<text class="meeting-list-item__title"
            >{{ props.item.capacity }}人</text
          ></view
        >
        <view class="meeting-list-item__content">
          <app-nut-icon-location2 />&nbsp;<text>{{ props.item.areaName }}</text>
        </view>
        <view class="meeting-list-item__content">
          <app-nut-icon-shop />&nbsp;<text>{{ props.item.deviceDictNames }}</text>
        </view>
      </view>
    </view>
    <meeting-room-status-list :is-full-room="props.item.isFullRoom || []" />
  </view>
</template>
<style lang="scss">
.meeting-list-item {
  font-size: 24px;
  color: #999;
  background-color: #fff;
  border-radius: 16px;
  margin-bottom: 20px;
  padding: 15px 20px;

  &:last-child {
    margin-bottom: 20px;
  }
  //会议列表的内容
  &__content {
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  &__image-container {
    width: 200px;
    height: 160px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  &__image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }

  &__title-wrapper {
    margin-bottom: 20px;
  }

  &__title {
    color: #000;
    font-size: 30px;
    font-weight: bold;
  }

  &__content {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  &__right {
    flex: 1;
    margin-left: 30px;
  }
}
</style>
